<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 90%;
			height: 500px;
			display: flex;
			background-color: pink;
/*			justify-content: center;
			align-items: center;*/
		}
		.box div{
			width: 100px;
			height: 100px;
			background-color: red;
			font-size: 40px;
			text-align: center;
			line-height: 100px;
			font-weight: bold;
		}
		.box .two{
			width: 200px;
			height: 100px;
			background-color:skyblue;
		}
		.box .thrre{
			flex:1;
/*			设置子元素  可用空间  如何分配空间*/
			height: 100px;
			background-color: blue;
		}

	</style>
</head>
<body>
	<div class="box">
		<div class="one">1</div>
		<!-- 100x100 -->
		<div class="two">2</div>
		<!-- 200x100 -->
		<div class="thrre">3</div>
		<!-- 取剩余空间 -->
	</div>
</body>
</html>